<template>
    <div style="width: 100%;">
        <div v-if="active==1">
            <el-form :inline="true" :model="user">
                <el-form-item label="姓名">
                    <el-input v-model="user.userName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="user.userPhone" placeholder="电话号码"></el-input>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-select v-model="user.userStatus" placeholder="用户状态">
                        <el-option label="---" value=""></el-option>
                        <el-option label="无效" value="N"></el-option>
                        <el-option label="有效" value="Y"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-button @click="addBtn">添加</el-button>
            </el-form>

            <el-table
                    :data="pageResult.records"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="id"
                        label="编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="userRealname"
                        label="姓名"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="roleName"
                        label="角色"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="userPhone"
                        label="电话"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="userEmail"
                        label="邮箱"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="userStatus"
                        label="状态"
                        width="200">
                    <template slot-scope="scope">
                        {{scope.row.userStatus == 'Y' ? '有效':'无效'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template  slot-scope="scope">
                        <el-dropdown :hide-on-click="true"  @command="handleUpdate" trigger="click">
                            <el-button>
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="scope.row.id+'-修改-'+scope.row.userStatus">修改</el-dropdown-item>
                                <el-dropdown-item :command="scope.row.id+'-查看-'+scope.row.userStatus">查看</el-dropdown-item>
                                <!--<el-dropdown-item :command="scope.row.id+'-快速登录-'+scope.row.userStatus">快速登录</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>


            <el-dialog
                    title="提示"
                    width="35%"
                    :visible.sync="dialogVisible">
                <Management_role :id="id" v-if="dialogVisible"></Management_role>
                <el-button @click="qx">取 消</el-button>
                <el-button type="primary" @click="qd">确 定</el-button>
            </el-dialog>

            <el-dialog
                    title="添加用户"
                    :visible.sync="dialogVisible2"
                    width="30%">
                <Add_user v-on:refresh="refresh" v-if="dialogVisible2"></Add_user>
            </el-dialog>

            <el-footer class="case-exam-footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>
            </el-footer>
        </div>

        <ud :id="id" v-if="active==2" @back="back"></ud>
    </div>
</template>

<script>
    import SystemUserService from '../../../model/mfy/system_user/SystemUserService.js'
    const systemUserService = SystemUserService.getInstance()

    import Management_role from './Management_role.vue'
    import Add_user from './Add_user.vue'
    import ud from './User_details.vue'


    export default {
        name: "System_user",
        data(){
            return {
                active:1,
                pageResult:{},
                dialogVisible:false,
                dialogVisible2:false,
                id:'',
                user:{},
            }
        },
        created(){
            this.list();
        },
        methods:{
            back(){
                this.active = 1
            },
            list(){
                systemUserService.list(this.user).then((response) => {
                    this.pageResult = response.data.data
                })
            },

            handleIndexChange(index){
                this.user.page = index
                this.list()
            },
            search(){
                this.user.page=1
                this.list()
            },
            refresh(){
                this.dialogVisible2=false;
                this.list();
            },
            handleUpdate(id){
                var val =id.split("-");
                if(val[1]=='修改'){
                    this.dialogVisible =true
                    this.id=val[0]
                }else if(val[1]=='查看'){
                    if(val[2]=='N'){
                        this.$message.error("该用户已离职!")
                        return;
                    }
                    this.id=val[0]
                    this.active++
                }else if(val[1]=='快速登录'){
                    if(val[2]=='N'){
                        this.$message.error("该用户已离职!")
                        // return;
                    }
                    var username="";
                    var pass="";
                    this.users.forEach(i=>{
                        if(i.id==val[0]){
                            username=i.username
                            pass = i.userPwd
                            return;
                        }
                    })
                    const params = new URLSearchParams();
                    params.append('username', username);
                    params.append('password', pass);
                    this.$axios.post('login', params).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success({
                                message: response.data.message,
                                duration: 1000
                            })
                            //配置全局token请求头
                            this.$axios.defaults.headers = {
                                'token': response.data.data
                            }
                            //提交token
                            this.$store.commit('setToken', response.data.data)
                            //提交menu给store
                            this.buildMenu()
                            //保存用户名
                            sessionStorage.setItem('username', response.data.username)
                            sessionStorage.setItem('realName',response.data.realName)
                            //路由跳转主界面
                            this.$router.push({
                                path : '/'
                            })
                        } else {
                            this.$message.error({
                                message: response.data.message,
                                duration: 2000
                            })
                        }
                    })


                }
            },
            qx(){
                this.dialogVisible=false
                this.dialogVisible2=false
                this.list();
            },
            qd(){
                this.qx();
            },
            addBtn(){
                this.dialogVisible2=true
            }
        },
        components:{
            Management_role,
            Add_user,
            ud
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
